<template>
  <div class="seachlist">
    <van-nav-bar title="查询" left-arrow @click-left="onClickLeft" />
    <van-search
      v-model="value"
      show-action
      placeholder="客户名称/联系方式"
      shape="round"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div class="listName" v-for="item in records" :key="item.id">
      <ul  @click="chagnCom(item.id)" v-if="msg">
        <li>
          客户名称
          <span>{{item.custName}}</span>
        </li>
        <li>
          联系方式
          <span>{{item.telephone}}</span>
        </li>
        <li>
          公司名称
          <span>{{item.company}}</span>
        </li>
        <li>
          职务
          <span>{{item.position}}</span>
        </li>
      </ul>
      <div class="btn">
          <van-button round type="info" size="small">新增拜访</van-button>
          <van-button round type="info" size="small">拜访记录</van-button>
        </div>
    </div>
    <div class="empty" v-show="isShow">
      <van-empty image="search" description="暂无结果"/>
    </div>
   
  </div>
</template>
 
<script>
import { getCust } from "../../request/api";
export default {
  data() {
    return {
      records: [],
      value: "",
      msg: 1,
      isShow: true
    };
  },

  methods: {
    onClickLeft() {
       this.$router.back();
    },
    onSearch() {
      getCust({
        keyword: this.value,
        current: "1",
        size: "6"
      }).then((res) => {
        console.log(res);
         if (res.errCode == 0) {
          console.log(res);
          let { records } = res.data;
          this.records = records;
          this.isShow = false;
        }
      });
    },
    chagnCom(id){
    this.$router.push("/compile/" +id);
    }
  },
};
</script>
 
<style lang = "less" scoped>
.seachlist{
  background: #f5f5f5;
  position: relative;

  .van-nav-bar {
  background: #369eff;
  /deep/.van-icon-arrow-left::before {
    color: #fff;
  }
  /deep/.van-nav-bar__text {
    color: #fff;
  }
  /deep/.van-nav-bar__title {
    color: #fff;
  }
}
.van-search__action {
  color: #369eff;
}
.listName {
    margin-top: 5px;
    background: #fff;
    width: 100%;
    height: 150px;
    /* border: 1px solid #000; */
    li {
      color: #ccc;
      margin: 5px 10px;
      font-size: 14px;

      span {
        color: #000;
        margin-left: 15px;
      }
    }
  }
  .btn {
    width: 100%;
    height: 50px;
    border-top: 1px solid #f5f5f5;
    /* border-bottom: 1px solid #f5f5f5; */
    line-height: 50px;
    background: #fff;
    position: absolute;
    .van-button {
      position: relative;
      left: 200px;
      margin-left: 10px;
    }
  }
}

</style>